<template>
  <Transition name="navbar-fade">
    <header 
      class="navbar" 
      v-show="!isHidden" 
      :class="{ 'navbar-scrolled': isScrolled }"
      :style="{ backgroundColor }"
    >
      <!-- Logo -->
      <div class="navbar-logo">
        <img 
          src="https://hhldb.oss-cn-beijing.aliyuncs.com/HHLDB_LOGO.png" 
          alt="HHLDB Logo" 
          @click="handleLogoClick"
        />
      </div>

      <!-- Mobile Menu Toggle -->
      <div class="navbar-toggle" @click="toggleMobileMenu">
        <span></span>
        <span></span>
        <span></span>
      </div>

      <!-- Desktop Menu -->
      <nav class="navbar-menu" :class="{ 'is-active': isMobileMenuOpen }">
        <template v-for="(item, index) in menuItems" :key="index">
          <!-- Normal Menu Item -->
          <div 
            v-if="!item.children" 
            class="navbar-item"
            :class="{ 'is-active': activeIndex === item.index }" 
            @click="handleMenuSelect(item.index)"
          >
            <span>{{ item.label }}</span>
          </div>

          <!-- Dropdown Menu Item -->
          <div 
            v-else 
            class="navbar-dropdown"
            :class="{ 'is-active': activeDropdown === item.index }"
          >
            <div class="navbar-item" @click="toggleDropdown(item.index)">
              <span>{{ item.label }}</span>
              <i class="dropdown-icon" :class="{ 'is-active': activeDropdown === item.index }"></i>
            </div>
            <Transition name="dropdown">
              <div v-show="activeDropdown === item.index" class="dropdown-content">
                <a 
                  v-for="(child, childIndex) in item.children" 
                  :key="childIndex"
                  :href="child.url"
                  :style="{ color: textColor }"
                  target="_blank"
                  class="dropdown-item"
                >
                  {{ child.label }}
                </a>
              </div>
            </Transition>
          </div>
        </template>
      </nav>
    </header>
  </Transition>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'NavBar',
  props: {
    // 当前活动的菜单项索引
    activeIndex: {
      type: String,
      default: 'home'
    },
    // 导航栏背景颜色
    backgroundColor: {
      type: String,
      default: '#a8a8a8'
    },
    // 文本颜色
    textColor: {
      type: String,
      default: '#ffffff'
    }
  },
  setup(props, { emit }) {
    const router = useRouter()
    
    // 状态变量
    const clickCount = ref(0)
    const isHidden = ref(false)
    const isScrolled = ref(false)
    const lastScrollTop = ref(0)
    const isMobileMenuOpen = ref(false)
    const activeDropdown = ref('')

    // 菜单项配置
    const menuItems = ref([
      { index: 'home', label: 'Home' },
      { index: 'search', label: 'Search' },
      { index: 'view', label: 'View' },
      { index: 'annotation', label: 'Annotation' },
      { index: 'analysis', label: 'Analysis' },
      { index: 'dataSource', label: 'DataSource' },
      { index: 'about', label: 'About' },
      { index: 'tools', label: 'Tools' },
      { 
        index: 'help', 
        label: 'Help',
        children: [
          { 
            index: 'introduce',
            label: 'Introduce',
            url: 'https://gitee.com/huang-yusong0129/WSSoc_program/wikis/项目基础说明'
          },
          { 
            index: 'git',
            label: 'Git',
            url: 'https://gitee.com/huang-yusong0129/WSSoc_program'
          },
          { 
            index: 'faq',
            label: 'FAQ',
            url: 'https://gitee.com/huang-yusong0129/WSSoc_program/issues'
          }
        ]
      }
    ])

    // 处理滚动事件
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      
      // 导航栏隐藏逻辑：下滑且超过导航栏高度时隐藏
      if (scrollTop > lastScrollTop.value && scrollTop > 70) {
        isHidden.value = true
      }
      // 导航栏显示逻辑：上滑时显示
      else if (scrollTop < lastScrollTop.value) {
        isHidden.value = false
      }
      
      // 滚动样式变化
      isScrolled.value = scrollTop > 20
      
      // 更新上次滚动位置
      lastScrollTop.value = scrollTop <= 0 ? 0 : scrollTop
    }

    // 处理Logo点击事件
    const handleLogoClick = () => {
      clickCount.value++
      if (clickCount.value === 3) {
        // 检查登录状态
        const token = localStorage.getItem('token')
        if (!token || token.trim() === '') {
          router.push('/login')
        } else {
          router.push('/welcome')
        }
        clickCount.value = 0
      }
    }

    // 处理菜单项选择
    const handleMenuSelect = (index: string) => {
      emit('select', index)
      router.push('/hhldb/' + index)
      // 在移动端点击后关闭菜单
      isMobileMenuOpen.value = false
    }

    // 切换移动端菜单
    const toggleMobileMenu = () => {
      isMobileMenuOpen.value = !isMobileMenuOpen.value
      // 打开移动菜单时关闭所有下拉菜单
      if (isMobileMenuOpen.value) {
        activeDropdown.value = ''
      }
    }

    // 切换下拉菜单
    const toggleDropdown = (index: string) => {
      activeDropdown.value = activeDropdown.value === index ? '' : index
    }

    // 在组件挂载时添加滚动事件监听
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
      // 添加点击外部关闭下拉菜单的逻辑
      window.addEventListener('click', (e: MouseEvent) => {
        const target = e.target as HTMLElement
        if (!target.closest('.navbar-dropdown') && activeDropdown.value) {
          activeDropdown.value = ''
        }
      })
    })

    // 在组件销毁前移除事件监听
    onBeforeUnmount(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    // 监听路由变化，关闭移动菜单
    watch(() => router.currentRoute.value.path, () => {
      isMobileMenuOpen.value = false
    })

    return {
      isHidden,
      isScrolled,
      handleLogoClick,
      handleMenuSelect,
      menuItems,
      isMobileMenuOpen,
      toggleMobileMenu,
      activeDropdown,
      toggleDropdown
    }
  }
})
</script>

<style scoped>
/* 基本样式 */
.navbar {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 999;
  align-items: center;
  padding: 0 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-scrolled {
  height: 60px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Logo 样式 */
.navbar-logo {
  height: 100%;
  display: flex;
  align-items: center;
}

.navbar-logo img {
  max-height: 50px;
  max-width: 120px;
  mix-blend-mode: multiply;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.navbar-logo img:hover {
  transform: scale(1.05);
}

/* 菜单样式 */
.navbar-menu {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.navbar-item {
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}

.navbar-item span {
  font-size: 18px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-item.is-active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 下拉菜单样式 */
.navbar-dropdown {
  position: relative;
  height: 100%;
}

.dropdown-icon {
  display: inline-block;
  margin-left: 5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.dropdown-icon.is-active {
  transform: rotate(180deg);
}

.dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 4px;
}

.dropdown-item {
  display: block;
  padding: 12px 15px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 移动端菜单按钮 */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
}

.navbar-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: currentColor;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 过渡动画 */
.navbar-fade-enter-active,
.navbar-fade-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-fade-enter-from,
.navbar-fade-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .navbar-item span,
  .dropdown-item {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 15px;
  }
  
  .navbar-toggle {
    display: flex;
  }
  
  .navbar-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: auto;
    flex-direction: column;
    background-color: inherit;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    align-items: flex-start;
    padding: 0;
  }
  
  .navbar-menu.is-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  
  .navbar-item,
  .navbar-dropdown {
    width: 100%;
    height: 60px;
  }
  
  .dropdown-content {
    position: relative;
    width: 100%;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .navbar-scrolled .navbar-menu {
    top: 60px;
  }
}
</style> 